<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>Teams</title>
    <script src="/js/pagination.js"></script>
</head>
<body>
<main class="ui fluid container">
    <div class="ui grid" id="vue-team">
        <div class="ten wide column">
            <div class="ui segment raised" v-bind:class="{loading:!ready}">
                <table class="ui selectable blue table very compact center aligned">
                    <thead>
                    <tr>
                        <th>Number</th>
                        <th>Team</th>
                        <th>创建人</th>
                        <th>创建时间</th>
                        <th>加入方式</th>
                        <th>人数</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="vt in vteams" :class="{negative:vt.attend=='private'}">
                        <td v-html="vt.id"></td>
                        <td><a :href="'/team/'+vt.id" v-html="vt.name"></a></td>
                        <td>{{vt.creator.name}}</td>
                        <td>{{vt.normalCreateTime}}</td>
                        <td>{{vt.attend}}</td>
                        <td>{{vt.teammates.length}}</td>
                        <td class="link item">
                            <button class="ui button red inverted mini animated" @click="apply(vt.id)"
                                    :class="{disabled:vt.attend=='private'}">
                                <div class="visible content">申请加入</div>
                                <div class="hidden content">
                                    <i class="right arrow icon"></i>
                                </div>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="ui centered grid">
                    <div class="ui pagination menu">
                        <pagination :class="{disabled:first}" content='<i class="angle double left icon"></i>'
                                    v-on:change_page="get_page" v-bind:to_page="0"></pagination>
                        <pagination :class="{disabled:first}" content="<i class='angle left icon'></i>"
                                    v-on:change_page="get_page" v-bind:to_page="number-1"></pagination>
                        <pagination v-for="n in npage" v-bind:key="n" :class="{active:number == n}" v-bind:content="n+1"
                                    v-on:change_page="get_page" v-bind:to_page="n"></pagination>
                        <pagination :class="{disabled:last}" content='<i class="angle  right icon"></i>'
                                    v-on:change_page="get_page" v-bind:to_page="number+1"></pagination>
                        <pagination :class="{disabled:last}" content='<i class="angle double right icon"></i>'
                                    v-on:change_page="get_page" v-bind:to_page="totalPages-1"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <div class="six wide column">
            <div class="ui segment raised">
                <p><a class="ui button inverted blue small" href="/team/create" v-if="getPrivilege()!=-1">创建队伍</a></p>
                <div class="ui labeled icon input">
                    <label class="ui label">加入队伍：</label>
                    <input type="text" placeholder="邀请码" v-model="inviteCode">
                    <i class="circular arrow right link icon" v-on:click="invite()"></i>
                </div>
                <h2>我的队伍</h2>
                <div class="ui huge list selection">
                    <a :href="'/team/'+t.id" class="item link" v-for="t in myteams">
                        {{t.name}}
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
<script>
    vue_team = new Vue({
        el: "#vue-team",
        data: {
            vteams: [{
                id: 0, name: "", creator: {name: ""}, normalCreateTime: "", attend: "public", teammates: []
            }],
            totalElements: 0,
            totalPages: 1,
            last: true,
            number: 0,
            size: 50,
            numberOfElements: 0,
            inviteCode: "",
            first: true,
            empty: true,
            npage: [],
            ready: false,
            myteams: [{id: 0, name: ""}]
        },
        methods: {
            getPrivilege(){
                return user_bar.privilege;
            },
            apply(id) {
                axios.post("/api/team/apply/" + id).then(function (res) {
                    if (res.data == "success") {
                        alert("Done!");
                    } else {
                        alert("failed!");
                    }
                });
            },
            invite() {
                let that = this;
                console.log(this.invideCode);
                axios.get("/api/team/invite/" + this.inviteCode)
                    .then(function (res) {
                        if (res.data == "success") {
                            alert("Done!");
                            that.inviteCode = "";
                        } else {
                            alert("failed!");
                        }
                    });
            },
            get_page(to_page) {
                if (to_page < 0 || to_page >= this.totalPages) return null;
                var that = this;
                that.ready = false;
                if (to_page !== 0 && (to_page < 0 || to_page >= that.totalPages)) {
                    that.ready = true;
                    return null;
                }
                axios.get('/api/team?page=' + to_page).then(function (res) {
                    if (res.data.code!=200){return;}
                    res = res.data.data;
                    that.vteams = res.content;
                    that.totalPages = res.totalPages;
                    that.totalElements = res.totalElements;
                    that.last = res.last;
                    that.number = res.number;
                    that.size = res.size;
                    that.first = res.first;
                    that.numberOfElements = res.numberOfElements;
                    that.empyt = res.empty;
                    that.npage = [];
                    for (var i = Math.max(0, that.number - 3); i < Math.min(that.totalPages, that.number + 3); i++) {
                        that.npage.push(i)
                    }
                });
                that.ready = true;
            }
        },
        created() {
            var that = this;
            this.get_page(0);
            axios.get("/api/team/myteams")
                .then(function (res) {
                    if (res.data != undefined) {
                        that.myteams = res.data;
                    }
                });
        }
    });
</script>
</html>